<template>
  <div id="fileItem-wrap">
    <div class="fileItem-box">
      <p class="hed-title">资源附件：</p>
      <div class="fileItem-tab">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane name="1">
            <span slot="label">
              <i class="el-icon-s-order"></i>
              文本 {{ txtList.length }}</span
            >
          </el-tab-pane>
          <el-tab-pane name="2">
            <span slot="label">
              <i class="el-icon-picture"></i>
              图片 {{ imgList.length }}</span
            >
          </el-tab-pane>
          <el-tab-pane name="3">
            <span slot="label">
              <i class="el-icon-video-camera-solid"></i>
              视频
              {{ videoList.length }}</span
            >
          </el-tab-pane>
        </el-tabs>
        <div class="fileItem-tab-coment">
          <div class="fileItem-tab-ul">
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-row :gutter="20">
                <el-col :span="6" v-for="v in imgList" :key="v.id">
                  <div class="fileItem-tab-li">
                    <div class="li-wrap">
                      <p class="li-file-type">
                        <i class="el-icon-s-order"></i>
                      </p>
                      <p class="li-name">
                        <el-checkbox :label="v.id">{{ v.name }}</el-checkbox
                        >{{ v.name }}
                      </p>
                    </div>
                    <p class="kb-info">大小：{{ v.size | fileSizeFilter }}</p>
                    <p class="clearfix d-info">
                      <span class="fl"
                        ><i class="el-icon-date"></i>
                        {{ v.createTime | timecycleYMD }}</span
                      >
                      <span class="fr"
                        ><i class="el-icon-download"></i>下载 22</span
                      >
                    </p>
                  </div>
                </el-col>
              </el-row>
            </el-checkbox-group>
          </div>

          <div class="file-all-btn">
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
            <span class="btn">下载</span>
            <span class="btn">取消</span>
            <span class="btn"
              ><i class="el-icon-shopping-cart-full"></i>加入资源车</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
  props: {},
  data() {
    return {
      activeName: "1",
      checkAll: false,
      checkedCities: ["上海", "北京"],
      cities: cityOptions,
      isIndeterminate: true,
      txtList: [],
      imgList: [],
      videoList: [],
    };
  },
  props: ["fileList"],
  mounted() {
    // console.log(this.fileList);
    this.txtList = this.fileList.filter(
      (v) =>
        v.type == "txt" ||
        v.type == "doc" ||
        v.type == "docx" ||
        v.type == "ppt"
    );
    this.imgList = this.fileList.filter(
      (v) => v.type == "jpg" || v.type == "png" || v.type == "jpeg"
    );
    this.videoList = this.fileList.filter((v) => v.type == "mp4");
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
};
</script>

<style  lang="scss" >
#fileItem-wrap {
  padding-top: 20px;
  .fileItem-box {
    border: 1px solid rgba(215, 215, 215, 1);
    min-height: 300px;
    position: relative;
    .hed-title {
      position: absolute;
      left: 70px;
      top: -17px;
      background: #fff;
      padding: 0 15px;
      font-size: 20px;
      font-weight: 900;
    }
    .fileItem-tab {
      padding: 30px 20px;
      .fileItem-tab-coment {
        .fileItem-tab-ul {
          .fileItem-tab-li {
            // height: 150px;
            border: 1px solid rgba(215, 215, 215, 1);
            padding: 10px;
            .li-wrap {
              background: rgba(242, 242, 242, 1);
              height: 120px;
              position: relative;
              .li-file-type {
                text-align: center;
                line-height: 100px;
                i {
                  font-size: 50px;
                  color: #aaaaaa;
                  padding-top: 20px;
                }
              }
              .li-name {
                position: absolute;
                bottom: 10px;
                left: 10px;
              }
            }
            .kb-info,
            .d-info {
              font-size: 12px;
              padding-top: 10px;
            }
          }
        }
        .file-all-btn {
          margin-top: 20px;
          border-top: 1px solid rgba(215, 215, 215, 1);
          padding-top: 20px;
          .btn {
            display: inline-block;
            cursor: pointer;
            margin-left: 20px;
            .el-icon-shopping-cart-full {
              font-weight: 900;
              color: #930b0b;
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
</style>
